/**
 * 目标1：信息渲染
 *  1.1 获取用户的数据
 *  1.2 回显数据到标签上
 * */

// 获取用户信息
const demo = async () => {
  const response = await axios.get('http://hmajax.itheima.net/api/settings', {
    // params 是专门用在 axios.get() 请求中的，它会自动把你提供的对象转成 URL 的查询字符串
    params: {
      creator: 'hha'
    }
  })
  const userObj = response.data.data
  console.log(userObj)
  Object.keys(userObj).forEach(key => {
    if (key === 'avatar') document.querySelector('.prew').src = userObj[key]
    else if (key === 'gender') {
      // 性别
      const gRadioList = document.querySelectorAll('.gender')
      gRadioList[userObj[key]].checked = true
    }
    else document.querySelector(`.${key}`).value = userObj[key]
  })
}
demo()


// 更换头像
document.querySelector('.upload').addEventListener('change', async e => {
  console.log(e.target.files[0])
  // 提交表单数据
  const fd = new FormData()
  fd.append('avatar', e.target.files[0])
  fd.append('creator', creator = 'hha')
  // 提交到服务器
  const response = await axios.put('http://hmajax.itheima.net/api/avatar', fd)
  console.log(response.data)
  document.querySelector('.prew').src = response.data.data.avatar
})



// 提交表单
document.querySelector('.submit').addEventListener('click', async () => {
  const userForm = document.querySelector('.user-form')
  // serialize 表单插件插件 要在（1. from表单下， 2. DOM标签存在name属性的值）
  const userObj = serialize(userForm, { hash: true, empty: true })
  // console.log(userObj) // email: 'itheima@itcast.cn', nickname: 'itheima', gender: '1', desc: '我是hha'

  // 提交到服务器
  userObj.gender = +userObj.gender
  console.log(userObj)
  const response = await axios.put('http://hmajax.itheima.net/api/settings', userObj)
})